<template>
    <div class="nav">
        <Menu :theme="theme3" active-name="1">
            <Menu-group title="内容管理">
                <Menu-item name="1">
                    <Icon type="document-text"></Icon>
                        <span @click="handleNavClick('/entry/goodsList')">商品预览</span>
                </Menu-item>
                <Menu-item name="2">
                    <Icon type="chatbubbles"></Icon>
                    <span @click="handleNavClick('11111')">评论管理</span>
                </Menu-item>
                <Menu-item name="3">
                    <Icon type="heart"></Icon>
                    <span @click="handleNavClick('3333')">用户留存</span>
                </Menu-item>
                <Menu-item name="4">
                    <Icon type="heart-broken"></Icon>
                    <span @click="handleNavClick('2222')">流失用户</span>
                </Menu-item>
            </Menu-group>
        </Menu>
    </div>
</template>

<script>
export default {
    name: 'nav',
    data() {
        return {
            theme3: 'light'
        }
    },
    methods: {
        handleNavClick (path) {
            this.$router.push({ path: path })
        }
    }
}
</script>

<style lang="less">
.nav {
    width: 150px;
    height: 100%;
    ul {
        width: 150px!important;
        height: 100%!important;
    }
}
ul.ivu-menu.ivu-menu-light.ivu-menu-vertical {
    border-bottom: 1px #ccc solid;
    background: transparent;
    padding-top: 10px;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item {
    font-size: 12px!important;
    color: #fff!important;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: #2d8cf0!important;
}
.nav ul[data-v-5b96b3be] {
    padding-top: 10px;
}
.ivu-menu-vertical .ivu-menu-item:hover {
    background: rgba(0, 0, 0, .2);
}
.ivu-menu-item-group-title {
    color: #fff!important;
}
</style>